<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        li {
            list-style-type: none;
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
        }

        ol {
            margin: 0;
            padding: 0;
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
        }

        body {
            background: #000;
            height: 100vh;
            overflow: hidden;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-perspective: 500px;
            perspective: 500px;
        }

        #autumn {
            position: absolute;
        }
        #autumn .maple:nth-child(1) {
            position: absolute;
            top: -123px;
            left: 24px;
            -webkit-transform-origin: -80px -125px;
            transform-origin: -80px -125px;
            -webkit-transform: translateY(-2000px);
            transform: translateY(-2000px);
            -webkit-animation: rotate 13004ms 2194ms linear infinite;
            animation: rotate 13004ms 2194ms linear infinite;
        }
        #autumn .maple:nth-child(1) .leaves .leave_wrapper {
            -webkit-transform: rotateX(18deg) rotateY(234deg) rotateZ(314deg);
            transform: rotateX(18deg) rotateY(234deg) rotateZ(314deg);
        }
        #autumn .maple:nth-child(1) .leaves .leave_wrapper::before {
            content: '';
            position: absolute;
            left: 48px;
            border-bottom: 40px solid #a45241;
            border-right: 5px solid transparent;
        }
        #autumn .maple:nth-child(1) .leaves .leave_wrapper .leave {
            position: absolute;
            border-top: 10px solid transparent;
            border-bottom: 10px solid transparent;
            -webkit-transform-origin: 50px 10px;
            transform-origin: 50px 10px;
        }
        #autumn .maple:nth-child(1) .leaves .leave_wrapper .leave:nth-child(1) {
            border-right: 50px solid #a45241;
            -webkit-transform: rotateZ(-30deg) rotateY(0deg) rotateX(0deg);
            transform: rotateZ(-30deg) rotateY(0deg) rotateX(0deg);
        }
        #autumn .maple:nth-child(1) .leaves .leave_wrapper .leave:nth-child(6n + 1) {
            border-right-width: 25px;
            width: 25px;
        }
        #autumn .maple:nth-child(1) .leaves .leave_wrapper .leave:nth-child(4n + 2) {
            border-right-width: 35px;
            width: 15px;
        }
        #autumn .maple:nth-child(1) .leaves .leave_wrapper .leave:nth-child(6n + 3) {
            border-right-width: 45px;
            width: 5px;
        }
        #autumn .maple:nth-child(1) .leaves .leave_wrapper .leave:nth-child(2) {
            border-right: 50px solid #a55c45;
            -webkit-transform: rotateZ(10deg) rotateY(6deg) rotateX(3deg);
            transform: rotateZ(10deg) rotateY(6deg) rotateX(3deg);
        }
        #autumn .maple:nth-child(1) .leaves .leave_wrapper .leave:nth-child(6n + 1) {
            border-right-width: 25px;
            width: 25px;
        }
        #autumn .maple:nth-child(1) .leaves .leave_wrapper .leave:nth-child(4n + 2) {
            border-right-width: 35px;
            width: 15px;
        }
        #autumn .maple:nth-child(1) .leaves .leave_wrapper .leave:nth-child(6n + 3) {
            border-right-width: 45px;
            width: 5px;
        }
        #autumn .maple:nth-child(1) .leaves .leave_wrapper .leave:nth-child(3) {
            border-right: 50px solid #a66653;
            -webkit-transform: rotateZ(50deg) rotateY(12deg) rotateX(6deg);
            transform: rotateZ(50deg) rotateY(12deg) rotateX(6deg);
        }
        #autumn .maple:nth-child(1) .leaves .leave_wrapper .leave:nth-child(6n + 1) {
            border-right-width: 25px;
            width: 25px;
        }
        #autumn .maple:nth-child(1) .leaves .leave_wrapper .leave:nth-child(4n + 2) {
            border-right-width: 35px;
            width: 15px;
        }
        #autumn .maple:nth-child(1) .leaves .leave_wrapper .leave:nth-child(6n + 3) {
            border-right-width: 45px;
            width: 5px;
        }
        #autumn .maple:nth-child(1) .leaves .leave_wrapper .leave:nth-child(4) {
            border-right: 50px solid #a77047;
            -webkit-transform: rotateZ(90deg) rotateY(18deg) rotateX(9deg);
            transform: rotateZ(90deg) rotateY(18deg) rotateX(9deg);
        }
        #autumn .maple:nth-child(1) .leaves .leave_wrapper .leave:nth-child(6n + 1) {
            border-right-width: 25px;
            width: 25px;
        }
        #autumn .maple:nth-child(1) .leaves .leave_wrapper .leave:nth-child(4n + 2) {
            border-right-width: 35px;
            width: 15px;
        }
        #autumn .maple:nth-child(1) .leaves .leave_wrapper .leave:nth-child(6n + 3) {
            border-right-width: 45px;
            width: 5px;
        }
        #autumn .maple:nth-child(1) .leaves .leave_wrapper .leave:nth-child(5) {
            border-right: 50px solid #a87a45;
            -webkit-transform: rotateZ(130deg) rotateY(24deg) rotateX(12deg);
            transform: rotateZ(130deg) rotateY(24deg) rotateX(12deg);
        }
        #autumn .maple:nth-child(1) .leaves .leave_wrapper .leave:nth-child(6n + 1) {
            border-right-width: 25px;
            width: 25px;
        }
        #autumn .maple:nth-child(1) .leaves .leave_wrapper .leave:nth-child(4n + 2) {
            border-right-width: 35px;
            width: 15px;
        }
        #autumn .maple:nth-child(1) .leaves .leave_wrapper .leave:nth-child(6n + 3) {
            border-right-width: 45px;
            width: 5px;
        }
        #autumn .maple:nth-child(1) .leaves .leave_wrapper .leave:nth-child(6) {
            border-right: 50px solid #a98469;
            -webkit-transform: rotateZ(170deg) rotateY(30deg) rotateX(15deg);
            transform: rotateZ(170deg) rotateY(30deg) rotateX(15deg);
        }
        #autumn .maple:nth-child(1) .leaves .leave_wrapper .leave:nth-child(6n + 1) {
            border-right-width: 25px;
            width: 25px;
        }
        #autumn .maple:nth-child(1) .leaves .leave_wrapper .leave:nth-child(4n + 2) {
            border-right-width: 35px;
            width: 15px;
        }
        #autumn .maple:nth-child(1) .leaves .leave_wrapper .leave:nth-child(6n + 3) {
            border-right-width: 45px;
            width: 5px;
        }
        #autumn .maple:nth-child(1) .leaves .leave_wrapper .leave:nth-child(7) {
            border-right: 50px solid #aa8e53;
            -webkit-transform: rotateZ(210deg) rotateY(36deg) rotateX(18deg);
            transform: rotateZ(210deg) rotateY(36deg) rotateX(18deg);
        }
        #autumn .maple:nth-child(1) .leaves .leave_wrapper .leave:nth-child(6n + 1) {
            border-right-width: 25px;
            width: 25px;
        }
        #autumn .maple:nth-child(1) .leaves .leave_wrapper .leave:nth-child(4n + 2) {
            border-right-width: 35px;
            width: 15px;
        }
        #autumn .maple:nth-child(1) .leaves .leave_wrapper .leave:nth-child(6n + 3) {
            border-right-width: 45px;
            width: 5px;
        }
        #autumn .maple:nth-child(1) .leaves .leave_wrapper .leave:nth-child(8) {
            border-right: 50px solid #ab9856;
            -webkit-transform: rotateZ(250deg) rotateY(42deg) rotateX(21deg);
            transform: rotateZ(250deg) rotateY(42deg) rotateX(21deg);
        }
        #autumn .maple:nth-child(1) .leaves .leave_wrapper .leave:nth-child(6n + 1) {
            border-right-width: 25px;
            width: 25px;
        }
        #autumn .maple:nth-child(1) .leaves .leave_wrapper .leave:nth-child(4n + 2) {
            border-right-width: 35px;
            width: 15px;
        }
        #autumn .maple:nth-child(1) .leaves .leave_wrapper .leave:nth-child(6n + 3) {
            border-right-width: 45px;
            width: 5px;
        }


        @-webkit-keyframes rotate {
            0% {
                -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateY(-600px);
                transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateY(-600px);
            }
            100% {
                -webkit-transform: rotateX(720deg) rotateY(360deg) rotateZ(720deg) translateY(600px);
                transform: rotateX(720deg) rotateY(360deg) rotateZ(720deg) translateY(600px);
            }
        }

        @keyframes rotate {
            0% {
                -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateY(-600px);
                transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateY(-600px);
            }
            100% {
                -webkit-transform: rotateX(720deg) rotateY(360deg) rotateZ(720deg) translateY(600px);
                transform: rotateX(720deg) rotateY(360deg) rotateZ(720deg) translateY(600px);
            }
        }

    </style>
</head>
<body>


<div id="autumn">
    <ol class="maples">
        <li class="maple">
            <ol class="leaves">
                <li class="leave_wrapper">
                    <div class="leave"></div>
                    <div class="leave"></div>
                    <div class="leave"></div>
                    <div class="leave"></div>
                    <div class="leave"></div>
                    <div class="leave"></div>
                    <div class="leave"></div>
                </li>
            </ol>
        </li>
    </ol>
</div>
</body>
</html>